<template>
	<view class="body">
		<uni-section title="个人信息" padding="20rpx 40rpx;">
			<view class="row-input">
				<text class="star">*</text>
				<text class="label">姓名:</text>
				<input type="text" disabled class="editor" v-model="your_name" placeholder="您的姓名" maxlength="20" />
			</view>

			<view class="row-input mt-10">
				<text class="star">*</text>
				<text class="label">手机号:</text>
				<input type="text" disabled class="editor" v-model="your_phone" placeholder="您的手机号" maxlength="20" />
			</view>

			<view class="row-input mt-10">
				<text class="star">*</text>
				<text class="label">工号:</text>
				<input type="text" disabled class="editor" v-model="your_num" placeholder="您的员工号" maxlength="20" />
			</view>
		</uni-section>

		<uni-section title="门禁认证" padding="20rpx 40rpx;" class="mt-10">
			<view class="row-input">
				<view class="label face-label-wrap">
					<view>
						<text class="star">*</text>
						<text>认证照片:</text>
					</view>
					<!-- <text class="tip">要求:展示清晰五官,建议白墙背景</text> -->
				</view>
				<image :src="filePath ||'/static/ic_upload.png'" mode="aspectFit" class="face-img">
				</image>
			</view>
		</uni-section>

		<uni-section title="门禁密码认证(可选)" padding="20rpx 40rpx;" class="mt-10" v-if="false">
			<view class="row-input mt-10">
				<text class="star hide">*</text>
				<text class="label">门禁密码:</text>
				<input type="text" class="editor" v-model="gate_pwd" placeholder="6位数字" maxlength="6" />
			</view>
		</uni-section>

		<uni-section title="门禁录入状态" padding="20rpx 40rpx;" class="mt-10" v-if="proofList.length">
			<template v-slot:right>
			<view class="btn-ref" @click="queryInfo">
				刷新
			</view>
			</template>
			<view class="row-input mt-10" v-for="(item) in proofList" :key="item.roomId">
				<text class="auth-state-label">房间号: {{item.roomName}}</text>
				<text class="auth-state-val-red"
					v-if="item.doorPwdIssueStatus==3 || item.faceIssueStatus==3">录入失败</text>
				<text class="auth-state-val-green"
					v-if="item.doorPwdIssueStatus==2 && item.faceIssueStatus==2">录入成功</text>
				<text class="auth-state-val" v-if="item.doorPwdIssueStatus==1 || item.faceIssueStatus==1">正在录入</text>
				<text class="auth-state-val" v-if="!item.faceIssueStatus">未录入</text>
				<image src='../../static/ic_retry.png' @click="reAuth(item)" mode="aspectFit" class="re-auth" v-if="item.doorPwdIssueStatus==3 || item.faceIssueStatus==3"></image>
			</view>
		</uni-section>

		<!-- <button type="primary" class="btn" @click="submit">提交</button> -->

	</view>
</template>

<script>
	import cfg from '@/utils/config.js'
	export default {
		data() {
			return {
				id: null,

				your_name: '',
				your_phone: '',
				your_num: '',

				face_image: '',
				gate_pwd: '',

				fileBid: '',
				filePath: '',

				proofList: [],
			}
		},
		onShow() {
			uni.hideHomeButton()
		},
		onLoad() {
			this.queryInfo();
		},
		methods: {
			chooseImg() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					sizeType: ['compressed'],
					camera: 'front',
					success: (res) => {
						console.log(res)
						if (res.errMsg == 'chooseMedia:ok') {
							if (res.tempFiles.length > 0) {
								let path = res.tempFiles[0].tempFilePath
								if (res.tempFiles[0].size > 198 * 1024) {
									uni.compressImage({
										src: path,
										quality: 90,
										compressedWidth: 1024,
										compressHeight: 1024,
										success: (res1) => {
											let p = res1.tempFilePath
											this.uploadImage(p)
										},
										fail: () => {
											uni.showToast({
												icon: 'none',
												title: '图片不超过200KB'
											})
										}
									})
								} else {
									this.uploadImage(path)
								}
							}
						}
					}
				})
			},
			uploadImage(path) {
				this.filePath = path
				uni.showLoading({
					title: '请稍后...'
				})
				uni.uploadFile({
					url: cfg.host + 'file/upload/single',
					name: 'file',
					formData: {
						'bizType': 'face'
					},
					header: {
						'mToken': cfg.getOpenUserId().openId
					},
					filePath: path,
					success: (res) => {
						console.log('upload res: ' + JSON.stringify(res))
						let data = JSON.parse(res.data)
						if (data.code == 0) {
							this.fileBid = data.data.fileBid || ''
						}
					},
					fail: (err) => {
						console.log('upload err: ' + JSON.stringify(err))
						uni.showToast({
							icon: 'error',
							title: '上传失败'
						})
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			queryInfo() {
				uni.request({
					url: cfg.host + 'user/get/info',
					success: (res) => {
						if (res.data.code == 0) {
							let info = res.data.data
							if (info == null) {
								uni.showToast({
									title: '人员信息未同步,请联系管理员',
									icon: 'none'
								})
							} else {
								this.id = info.id
								this.your_name = info.realName || ''
								this.your_phone = info.phone || ''
								this.your_num = info.userSn || ''
								this.gate_pwd = info.doorPwd || ''

								let file = info.faceFile
								if (file != null) {
									this.fileBid = file.fileBid || ''
									this.filePath = cfg.imageHost + (file.fileProxyPath || '')
								}

								this.proofList = info.proofList || []
							}
						} else {
							uni.showToast({
								title: '未查询到信息,请重试',
								icon: 'none'
							})
						}
					}
				})
			},
			reAuth(room){
				uni.request({
					url: cfg.host + 'user/reissue/'+room.roomId,
					method: 'POST',
					data:{
						'roomId':room.roomId
					},
					success: (res) => {
						if (res.data.code == 0) {
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							})
						} else {
							uni.showToast({
								title: '保存失败',
								icon: 'error'
							})
						}
					},
					fail: () => {
						uni.showToast({
							title: '保存失败',
							icon: 'error'
						})
					}
				})
			},
			submit() {
				if (!this.id) {
					uni.showToast({
						title: '数据有误,请重试',
						icon: 'none'
					})
					return;
				}
				if (!this.your_name.trim()) {
					uni.showToast({
						title: '请填写姓名',
						icon: 'none'
					})
					return;
				}
				if (!this.your_phone.trim()) {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					})
					return;
				}
				if (!this.your_num.trim()) {
					uni.showToast({
						title: '请填写工号',
						icon: 'none'
					})
					return;
				}
				if (!this.fileBid.trim()) {
					uni.showToast({
						title: '请上传人脸照片',
						icon: 'none'
					})
					return;
				}
				if (this.gate_pwd.trim() && this.gate_pwd.length != 6) {
					uni.showToast({
						title: '门禁密码为6位数字',
						icon: 'none'
					})
					return;
				}


				uni.request({
					url: cfg.host + 'user/update',
					method: 'POST',
					data: {
						'id': this.id,
						'realName': this.your_name,
						'phone': this.your_phone,
						'userSn': this.your_num,
						'fileBid': this.fileBid,
						'doorPwd': this.gate_pwd
					},
					success: (res) => {
						if (res.data.code == 0) {
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							})
						} else {
							uni.showToast({
								title: '保存失败',
								icon: 'error'
							})
						}
					},
					fail: () => {
						uni.showToast({
							title: '保存失败',
							icon: 'error'
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.face-label-wrap {
		flex: 1;
		display: flex;
		flex-direction: column;

		.tip {
			font-size: 24rpx;
			color: red;
			margin-top: 10rpx;
		}
	}

	.face-img {
		width: 160rpx;
		height: 160rpx;
	}

	.auth-state-label {
		flex: 1;
	}

	.auth-state-val {
		width: 150rpx;
	}

	.auth-state-val-green {
		width: 150rpx;
		color: green;
	}

	.auth-state-val-red {
		width: 150rpx;
		color: red;
	}

	.re-auth {
		width: 70rpx;
		height: 50rpx;
		box-sizing: border-box;
		padding: 8rpx 0rpx;
	}
	
	.btn-ref{
		margin-right: 30rpx;
		color: royalblue;
	}
</style>